<template>
  <el-card class="content-card">
    <template #header>
      <div class="card-header">
        <span>办公审批</span>
        <el-button type="text" @click="goToPage('/home/approve/index')">去申请</el-button>
      </div>
    </template>
    <div class="approval-entry">
      <div class="entry-item" @click="goToPage('/home/approve/index')">
        <el-icon :size="24"><Document /></el-icon>
        <div class="entry-title">审批申请</div>
      </div>
      <div class="entry-item" @click="goToPage('/home/approve/mylist')">
        <el-icon :size="24"><User /></el-icon>
        <div class="entry-title">我申请的</div>
      </div>
      <div class="entry-item" @click="goToPage('/home/approve/checklist')">
        <el-icon :size="24"><Check /></el-icon>
        <div class="entry-title">我处理的</div>
      </div>
      <div class="entry-item" @click="goToPage('/home/approve/copylist')">
        <el-icon :size="24"><Message /></el-icon>
        <div class="entry-title">抄送给我的</div>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
  import { Document, User, Check, Message } from '@element-plus/icons-vue'
  import { useRouter } from 'vue-router'
  import { ElMessage } from 'element-plus'

  const router = useRouter()

  // 跳转到指定页面
  const goToPage = (url: string) => {
    if (url) {
      router.push(url).catch(err => {
        ElMessage.error('页面跳转失败')
        console.error('页面跳转失败:', err)
      })
    }
  }
</script>

<style scoped>
  /* 办公审批样式 */
  .content-card {
    /* 移除固定高度，让组件自适应内容 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: none;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
  }

  .approval-entry {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 20px 0;
  }

  .approval-entry .entry-item {
    width: 45%;
    margin-bottom: 15px;
  }

  .entry-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
    color: #666;
    padding: 16px;
    border-radius: 8px;
  }

  .entry-item:hover {
    color: #409eff;
    background: #f0f9ff;
    transform: translateY(-2px);
  }

  .entry-title {
    margin-top: 8px;
    font-size: 14px;
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .approval-entry .entry-item {
      width: 48%;
      margin-bottom: 12px;
    }

    .entry-item .el-icon {
      font-size: 20px;
    }

    .entry-title {
      font-size: 13px;
      margin-top: 6px;
    }
  }
</style>
